<template>
	<view>
		<scroll-view class="img-scroll" :scroll-x="true" scroll-into-view="1">
			<navigator 
			v-for="(imgScroll,index) of imgScrolls.bans" 
			:key="imgScroll.index"
			:url="imgScroll.href"
			 hover-class="none"
			 open-type="switchTab">
			<img :src="imgScroll.src" :alt="imgScroll.alt">
			</navigator>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'scrollViews',
		props: {
			imgScrolls: {
				type: Object
			}
		}
	}
</script>

<style>
	.img-scroll {
		white-space: nowrap;
	}
	.img-scroll navigator {
		display: inline-block;
		border-radius: 20px;
		width: 689rpx;
		height: 276rpx;
		overflow: hidden;
		margin-right: 20rpx;
		
	}
 

	.img-scroll img {
		width: 689rpx;
		height: 276rpx;
		border-radius: 21px;
		margin: 0 auto;
	}
</style>
